<template>
  <t-link theme="primary" v-permission="['bpm:task:list-by-process-instance-id']" @click="handleOpenDialog('read', { processInstanceId: props.processInstanceId })">
    审批记录
  </t-link>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData }"
    :api-map="{ get: getProcessInstanceTaskList }"
    header="*审批记录"
    :on-before-set-data="handleDialogSetData"
  >
    <t-timeline mode="same">
      <t-timeline-item v-for="_ in formData.list" :key="_.id">
        <div>任务名称：{{ _.name }}</div>
        <div>审批状态：{{ dictionaryStore.analysis('bpm_task_status', _.status) }}</div>
        <div>审批人： {{ _.assigneeUser?.deptName }} - {{ _.assigneeUser?.nickname }}</div>
        <div>审批备注：{{ _.reason }}</div>
        <template #label>
          <div style="margin-top: 6px">创建时间：{{ dayjs(_.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          <div v-if="_.endTime">审批时间：{{ dayjs(_.endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          <div v-if="_.durationInMillis">耗时：{{ (_.durationInMillis / 1000 / 60).toFixed(1) }}分钟</div>
        </template>
      </t-timeline-item>
    </t-timeline>
  </custom-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { useTemplateRef } from 'vue';

import { getProcessInstanceTaskList } from '@/api/approve/list';
import CustomDialog from '@/components/custom/dialog/index.vue';
import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// props
const props = defineProps({
  // 流程实例id
  processInstanceId: {
    type: String,
    required: true,
  },
});
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框设置数据
const handleDialogSetData = (params: Record<string, any>) => {
  return {
    list: params,
  };
};
</script>
